<template>
  <el-row justify="center">
    <el-col :span="15">
      <h1 id="教室需求">教室需求</h1>
      <el-form :model="needsForm" label-width="100px" label-position="right">
        <template v-if="editable">
          <el-form-item label="培训时段">
            <el-form>
              <el-form-item v-for="(date,index) in dates" :key="index" :label="moment(date).format('MM-DD')">
                <el-checkbox v-for="(value,i) in checkDate(date)" :key="i" v-model="value.checked" @change = checkChange(value.checked,index*timeLength+i)>
                  {{value.time}}
                </el-checkbox>
              </el-form-item>
            </el-form>
<!--            <el-button type="primary" plain>智能分配教室</el-button>-->
          </el-form-item>
        </template>
        <el-form-item :label="title" v-if="!editable||hasData">
          <el-form v-if="hasData">
            <template v-for="(info,index) in detailListNoNull" :key="index">
              <el-form-item :label="moment(info.date).format('MM-DD')" class="chooseRoom">
                <el-row>
                  <el-col :span="2">
                    {{ info.time }}
                  </el-col>
                  <el-col :span="9">
                    <template v-if="editable">
                      <el-select v-model="info.classroomId" placeholder="请选择教室">
                        <el-option
                            v-for="room in rooms"
                            :key="room.id"
                            :label="room.name"
                            :value="room.id">
                        </el-option>
                      </el-select>
                    </template>
                    <template v-else>
                      {{classroomName(info.classroomId)}}
                    </template>
                  </el-col>
                  <el-col :span="9">
                    <template v-if="editable">
                      <el-input v-if="info.classroomId === -1" v-model="info.other" placeholder="请填写教室场地需求"></el-input>
                    </template>
                    <template v-else-if="info.classroomId === -1">
                      {{'备注：'+info.other}}
                    </template>
                  </el-col>
                </el-row>
              </el-form-item>
            </template>
          </el-form>
          <template v-else>
            无教室需求
          </template>
        </el-form-item>
        <el-form-item label="其他">
          <template v-if="editable">
            <el-checkbox label="需要信息技术支持" v-model="needSupport" @change="change"></el-checkbox>
            <el-input :disabled="!needSupport" v-model="needsForm.detail" type="textarea" :rows="5" placeholder="请填写信息技术支持明细"></el-input>
          </template>
          <template v-else-if="needsForm.detail.length > 0">
              需要信息技术支持<br />
              {{needsForm.detail}}
          </template>
          <template v-else>无</template>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>
import axios from "axios";
import moment from "moment";

export default {
  name: "ClassroomNeedsForm",
  props: {
    modelValue:Object,
    dates:Array,
    editable:Boolean
  },
  emits: ['update:modelValue'],
  data(){
    return{
      //'培训教室','多功能教室','多媒体教室','其他'
      rooms:[],
      checkList:[],
      timeLength:3,
      needSupport:false
    }
  },
  methods:{
    initData(){
      this.findAllClassroom().then(()=>{
        this.rooms.push({
          id:-1,
          name:"其他"
        });
      });
      this.initCheckList();
    },
    initCheckList(){
      this.checkList = [];
      this.dates.forEach((curVal)=>{
        this.checkList.push(
            {
              date:curVal,
              time:'上午',
              classroomId:'',
              other:'',
              checked:false
            },{
              date:curVal,
              time:'下午',
              classroomId:'',
              other:'',
              checked:false
            },{
              date:curVal,
              time:'晚上',
              classroomId:'',
              other:'',
              checked:false
            }
        );
      })
    },
    updateCheckList(){
      let list = this.needsForm.detailList;
      if(list && list.length > 0){
        for(let i = list.length - 1;i >=0 ;i--){
          if(list[i]){
            let index = this.getIndex(list[i]);
            this.swap(i,index);
          }
        }
        this.checkList.forEach((value,index)=>{
          if(this.needsForm.detailList[index]){
            value.checked = true;
          }
        })
        console.log("update complete");
      }
    },
    getIndex(detail){
      return this.checkList.findIndex((value)=>{
        return moment(value.date).isSame(detail.date) && value.time === detail.time;
      })
    },
    swap(oldIndex,newIndex){
      if(oldIndex !== newIndex){
        let list = this.needsForm.detailList;
        let t = list[oldIndex];
        list[oldIndex] = list[newIndex];
        list[newIndex] = t;
      }
    },
    updateNeedSupport(){
      this.needSupport = !(this.needsForm.detail.length === 0);
    },
    checkChange(checked,index){
      console.log(checked,index);
      if(checked){
        this.needsForm.detailList[index] = this.checkList[index];
      }else{
        this.needsForm.detailList[index] = undefined;
      }
    },
    change(){
      if(!this.needSupport){
        this.needsForm.detail = '';
      }
    },
    checkDate(date){
      return this.checkList.filter((value)=>{
        return value.date === date;
      })
    },
    findAllClassroom(){
      return axios.get(this.$host+"/classroom").then(response=>{
        if(response.data.code === 0){
          this.rooms = response.data.data;
        }else{
          this.$message.error(response.data.msg);
        }
      })
    },
    moment(date){
      return moment(date);
    },
    classroomName(id){
      let room = this.rooms.find((cur)=>{
        return cur.id === id;
      })
      if(room){
        return room.name;
      }
      return "";
    }
  },
  computed:{
    needsForm: {
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      }
    },
    title(){
      return this.editable?'选择教室':'教室需求';
    },
    detailListNoNull(){
      return this.needsForm.detailList.filter((value)=>{
        return value !== undefined;
      })
    },
    hasData(){
      return this.detailListNoNull.length !== 0
    },
  },
  watch:{
    dates(){
      console.log("dates change")
      this.initCheckList();
    },
    editable(){
      this.updateCheckList();
      this.updateNeedSupport();
    }
  },
  created() {
    console.log("create");
    this.initData();
  }
}
</script>

<style scoped>
.chooseRoom{
  margin-bottom: 20px;
}
</style>